{% extends 'base.html' %}   {# 将当前页面继承至base.html母版 #}
{% block content %}

        <div class="col-sm-9 col-12" style="padding: 0 10px;" id="left">
            <!-- 轮播图组件应用，除了修改图片路径外，其它内容可不修改 -->
            <div id="carouselExampleIndicators" class="col-12 carousel slide"
                 data-ride="carousel" style="padding: 0">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0"
                        class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="/img/banner-1.jpg" class="d-block w-100" alt="Banner广告一">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/banner-2.jpg" class="d-block w-100" alt="Banner广告二">
                    </div>
                    <div class="carousel-item">
                        <img src="/img/banner-3.jpg" class="d-block w-100" alt="Banner广告三">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators"
                    role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators"
                    role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>

            {% for article in article_list %}
            <div class="col-12 row article-list">
                <div class="col-sm-3 col-3 thumb d-none d-sm-block">
                    <img src="/thumb/{{article.thumbnail}}"  width="226" height="136" alt="thumb_thumb_nail"/>
                </div>
                <div class="col-sm-9 col-xs-12 detail">
                    <div class="title"><a href="/article/{{article.articleid}}">{{article.headline}}</a></div>
                    <div class="info">作者：{{article.nickname}}&nbsp;&nbsp;&nbsp;
                        类别：{{article_type[article.type//100]}}&nbsp;&nbsp;&nbsp;
                        日期：{{article.createtime}}&nbsp;&nbsp;&nbsp;阅读：{{article.readcount}} 次&nbsp;&nbsp;&nbsp;消耗积分：{{article.credit}} 分</div>
                    <div class="intro">
                        {{article.content}}
                    </div>
                </div>
            </div>
            {% endfor %}


            <!-- 分页功能模板代码，使用Jinja2填充 -->
            <div class="col-12 paginate">
            {% if page == 1 %}
                <a href="/redis/page/1">上一页</a>&nbsp;&nbsp;
                {% else %}
                <a href="/redis/page/{{page - 1}}">上一页</a>&nbsp;&nbsp;
                {% endif %}

                {% for i in range(total) %}
                <a href="/redis/page/{{i + 1}}">{{i + 1}}</a>&nbsp;&nbsp;
                {% endfor %}

                {% if page == total %}
                <a href="/redis/page/{{page}}">下一页</a>
                {% else %}
                <a href="/redis/page/{{page + 1}}">下一页</a>
                {% endif %}
            </div>


        </div>

        {# 按需引入side.html，首页需要 #}
        {% include 'side.html' %}

{% endblock %}